<template>
    <div class="invite-box" v-loading="loading">
        <topTitle title="基础奖励"/>
        <div class="table-box">
            <div class="table-title-box">
                <div class="table-title-item">奖励对象</div>
                <div class="table-title-item">奖励内容</div>
                <div class="table-title-item">单价（宝石）</div>
            </div>
            <div v-for="(item, index) in detail.inviteBasicRewardVo" :key="index" class="table-for-box">
                <div class="table-content-box">
                    <div class="table-content-item">
                        <span v-if="item.inviteType === 0">直接邀请</span>
                        <span v-else>扩散邀请</span>
                    </div>
                    <div class="table-content-item">
                        趣宝石
                    </div>
                    <div class="table-content-item">
                        <input type="number" v-model.number="item.num">
                    </div>
                </div>
            </div>
        </div>

        <topTitle title="提成奖励"/>
        <div class="total-box">
            <span class="total-title">生效时间</span>
            <el-input-number v-model="detail.registerDayLimit" controls-position="right"></el-input-number>
            <span class="total-unit">天</span>
            <span class="total-title" style="margin-left:30px">领取上限</span>
            <el-input-number v-model="detail.totalLimit" controls-position="right"></el-input-number>
            <span class="total-unit">分钟</span>
        </div>
        <div class="table-box">
            <div class="table-title-box">
                <div class="table-title-item">奖励对象</div>
                <div class="table-title-item">奖励内容</div>
                <div class="table-title-item">奖励类型</div>
                <div class="table-title-item">单价（宝石）</div>
                <div class="table-title-item">计数单位（分钟）</div>
                <div class="table-title-item">每日上限（分钟）</div>
                <div class="table-title-item">计数方式</div>
            </div>
            <div v-for="(item, index) in detail.invitePercentageRewardVo" :key="index" class="table-for-box">
                <div class="table-content-box">
                    <div class="table-content-item">
                        <span v-if="item.inviteType === 0">直接邀请</span>
                        <span v-else>扩散邀请</span>
                    </div>
                    <div class="table-content-item">
                        趣宝石
                    </div>
                    <div class="table-content-item">
                        固定
                    </div>
                    <div class="table-content-item">
                        <input type="number" v-model.number="item.num">
                    </div>
                    <div class="table-content-item">
                        <input type="number" v-model.number="item.oneLimit">
                    </div>
                    <div class="table-content-item">
                        <input type="number" v-model.number="item.dayLimit">
                    </div>
                    <div class="table-content-item">
                        向下取整
                    </div>
                </div>
            </div>
        </div>

        <topTitle title="翻倍规则"/>
        <div class="table-box">
            <div class="table-title-box">
                <div class="table-title-item">目标阶段</div>
                <div class="table-title-item">倍速</div>
                <div class="table-title-item">活跃收入（趣宝石）</div>
                <div class="table-title-item">操作</div>
            </div>
            <div v-for="(item, index) in detail.inviteConfLevelVoList" :key="index" class="table-for-box">
                <div class="table-content-box">
                    <div class="table-content-item">
                        {{index + 1}}
                    </div>
                    <div class="table-content-item">
                        <input type="number" v-model.number="item.multiple" @input="inputCheck($event, item)">
                    </div>
                    <div class="table-content-item">
                        <input type="number" v-model.number="item.target">
                    </div>
                    <!-- style="flex: 2;" -->
                    <div class="table-content-item">
                        <el-button type="text" size="small" @click="delTaskItem(index)" v-if="detail.inviteConfLevelVoList && (detail.inviteConfLevelVoList.length > 1)">删除</el-button>
                        <el-button type="text" size="small" @click="addUpTaskItem(index)">向上添加</el-button>
                        <el-button type="text" size="small" @click="addDownTaskItem(index)">向下添加</el-button>
                    </div>
                </div>
            </div>
        </div>

        <div class="submit-box" v-if="changeNum > 1">
            <el-button @click="notSave">取 消</el-button>
            <el-button type="success" @click="save">保 存</el-button>
        </div>

    </div>
</template>

<script>
export default {
    data () {
        return {
            changeNum: 0,
            loading: false,
            detail: {
                inviteBasicRewardVo: [], // 邀请基础奖励
                invitePercentageRewardVo: [], // 邀请提成奖励
                inviteConfLevelVoList: [], //  翻倍规则
                registerDayLimit: 0, // 生效时间
                totalLimit: 0 // 领取上限
            }
        }
    },

    watch: {
        detail: {
            handler: function (val) {
                this.changeNum++
            },
            deep: true
        }
    },

    created () {
        this.findInviteTask()
    },

    methods: {
        // 获取详情
        async findInviteTask () {
            this.changeNum = 0
            this.loading = true
            let res = await this.$http.get('/task/findInviteTask')
            if (res.code === '0') {
                this.dataInit(res.data)
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        dataInit (data) {
            data.inviteBasicRewardVo = data.inviteBasicRewardVo || []
            data.invitePercentageRewardVo = data.invitePercentageRewardVo || []
            data.inviteConfLevelVoList = data.inviteConfLevelVoList || []
            this.currentDetail = JSON.parse(JSON.stringify(data))
            this.detail = data
        },

        // 向上添加
        addUpTaskItem (index) {
            let item = {
                multiple: '',
                level: ''
            }
            this.detail.inviteConfLevelVoList.splice(index, 0, item)
        },

        // 向下添加
        addDownTaskItem (index) {
            let item = {
                multiple: '',
                level: '',
                target: ''
            }
            this.detail.inviteConfLevelVoList.splice(index + 1, 0, item)
        },

        // 删除
        delTaskItem (index) {
            this.detail.inviteConfLevelVoList.splice(index, 1)
        },

        // 数据校验
        checkData () {
            if (!this.detail.inviteBasicRewardVo[0].num) {
                return '请填写基础奖励 直接邀请 单价！'
            }
            if (!this.detail.inviteBasicRewardVo[1].num) {
                return '请填写基础奖励 扩散邀请 单价！'
            }
            if (!this.detail.registerDayLimit) {
                return '请填写提成奖励，生效时间！'
            }
            if (!this.detail.totalLimit) {
                return '请填写提成奖励，领取上限！'
            }
            if (!this.detail.invitePercentageRewardVo[0].num) {
                return '请填写提成奖励 直接邀请 单价！'
            }
            if (!this.detail.invitePercentageRewardVo[0].oneLimit) {
                return '请填写提成奖励 直接邀请 计数单位！'
            }
            if (!this.detail.invitePercentageRewardVo[0].dayLimit) {
                return '请填写提成奖励 直接邀请 每日上限！'
            }
            if (!this.detail.invitePercentageRewardVo[1].num) {
                return '请填写提成奖励 扩散奖励 单价！'
            }
            if (!this.detail.invitePercentageRewardVo[1].oneLimit) {
                return '请填写提成奖励 扩散奖励 计数单位！'
            }
            if (!this.detail.invitePercentageRewardVo[1].dayLimit) {
                return '请填写提成奖励 扩散奖励 每日上限！'
            }
            for (let i = 0; i < this.detail.inviteConfLevelVoList.length; i++) {
                let item = this.detail.inviteConfLevelVoList[i]
                if (!item.multiple) {
                    return `请填写 翻倍规则 第 ${i + 1} 条 倍速！`
                }
                if (!item.target) {
                    return `请填写 翻倍规则 第 ${i + 1} 条 活跃收入！`
                }

                if (i < this.detail.inviteConfLevelVoList.length - 1) {
                    let nextItem = this.detail.inviteConfLevelVoList[i + 1]
                    if (item.multiple >= nextItem.multiple) {
                        return `翻倍规则 第 ${i + 1} 条 倍速 填写有误！`
                    }
                }
            }
        },

        async save () {
            let msg = this.checkData()
            if (msg) {
                this.$notify({
                    title: '请完善信息',
                    message: msg,
                    duration: 0
                })
                return
            }
            this.detail.inviteConfLevelVoList.forEach((item, index) => {
                item.level = index + 1
            })
            let res = await this.$http.post('/task/updateInviteTask', this.detail)
            if (res.code === '0') {
                this.$message({
                    type: 'success',
                    message: '保存成功'
                })
                this.findInviteTask()
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 取消保存
        notSave () {
            this.detail = JSON.parse(JSON.stringify(this.currentDetail))
            this.changeNum = 0
            this.$message({
                type: 'success',
                message: '取消成功'
            })
        },

        // 倍率不能超过三位数 1.1 1.2
        inputCheck (e, item) {
            if (e.target.value.length > 3) {
                item.multiple = Number(event.target.value.slice(0, 3))
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .invite-box {
        padding-bottom: 20px;
        .total-box {
            display: flex;
            align-items: center;
            font-size: 14px;
            .total-title {
                font-weight: 500;
                margin-right: 10px;
            }
            .total-unit {
                margin-left: 5px;
                font-weight: normal;
            }
        }
        .table-box {
            margin-top: 20px;
            margin-bottom: 20px;
            border: 1px solid #ebeef5;
            border-bottom: none;
            .table-title-box {
                display: flex;
                font-size: 14px;
                color: #909399;
                border-bottom: 1px solid #ebeef5;
                .table-title-item {
                    flex: 1;
                    padding: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-right: 1px solid #ebeef5;
                    &:last-child {
                        border: none;
                    }
                }
            }
            .table-for-box {
                .table-content-box {
                    display: flex;
                    border-bottom: 1px solid #ebeef5;
                    .table-content-item {
                        flex: 1;
                        // min-height: 40px;
                        padding: 10px;
                        font-size: 14px;
                        color: #606266;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                        border-right: 1px solid #ebeef5;
                        &:last-child {
                            border: none;
                        }
                        > input {
                            width: 100%;
                            text-align: center;
                        }
                    }
                }
            }
        }

        .submit-box {
            width: 300px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
</style>
